/** 
 
*/
import React, { PureComponent } from 'react';
import { FirstHeaderC, MilepostC, NoDataMaskC } from '../../../../comps';
import { Spin } from 'antd';
import { connect } from 'dva';
import 'moment/locale/zh-cn';

class ActionC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      masking: true, // 遮罩层
      actionEventData: undefined, // 行为事件数据
      tradingcode: undefined, // 证券代码
      //exchangeCode: undefined,    // 交易市场
    };
  }

  componentDidMount() {
    const { tradingcode, exchangeCode } = this.props;
    this.setState(
      {
        tradingcode: tradingcode,
        // exchangeCode: exchangeCode
      },
      () => {
        this.getActionEventData();
      },
    );
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { tradingcode, exchangeCode } = this.props;
    if (
      tradingcode !== nextProps.tradingcode
      // ||exchangeCode !== nextProps.exchangeCode
    ) {
      this.setState(
        {
          tradingcode: nextProps.tradingcode,
          //exchangeCode: nextProps.exchangeCode
        },
        () => {
          this.getActionEventData();
        },
      );
    }
  }

  // 获取行为事件数据
  getActionEventData = () => {
    const { tradingcode, exchangeCode } = this.state;
    if (
      tradingcode
      //&& exchangeCode
    ) {
      this.props.dispatch({
        type: 'finaFlockingM/queryEventByCode',
        payload: {
          tradingCode: tradingcode,
          // exchangeCode: exchangeCode
        },
        callback: (data) => {
          if (data.code == '0') {
            this.setState({
              actionEventData: data.data,
              masking: false,
            });
          }
        },
      });
    } else {
      this.setState({
        masking: true,
        actionEventData: undefined,
      });
    }
  };
  render() {
    const { actionEventData, masking } = this.state;
    const actionEventDatas = masking
      ? [
          { name: '发行开始日', date: '2022-01-01' },
          { name: '发行结束日', date: '2022-01-01' },
          { name: '认购缴款日', date: '2022-01-01' },
          { name: '起息日', date: '2022-01-01' },
          { name: '到期兑付日', date: '2022-01-01' },
        ]
      : actionEventData;
    return (
      <div>
        <FirstHeaderC title={'行为事件'} />
        <Spin spinning={this.props.loading.effects['finaFlockingM/queryEventByCode'] == true}>
          <div style={{ position: 'relative' }}>
            <MilepostC data={actionEventDatas} />
            {masking ? <NoDataMaskC height={'130px'} title={'请选择证券代码，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ finaFlockingM, loading }) => ({
  finaFlockingM,
  loading,
}))(ActionC);
